<script>
import request from "../../../utils/request"
import { getShowImage, handleUrlParams } from "../../../utils"
import store from "@/store"
import { userActionType } from "@/store/modules/user"
import checkIsVip from "@/components/checkIsVip/index.vue"
import { vocabularyLearningActionType } from "@/store/modules/vocabularyLearning"
import daiBeiAlert from "@/components/daiBeiAlert.vue"

export default {
  name: "thesaurusList",
  components: { checkIsVip, daiBeiAlert },
  computed: {
    userSelectExamId: () => store.getters[userActionType.getters.userSelectExamId],
  },
  methods: {
    handleUrlParams,
    getShowImage,
    async itemClick(item) {
      console.log(item, "切换词库")
      //检查是否有选择考试
      if (!this.userSelectExamId) {
        await store.dispatch(userActionType.action.examInfo)
      }
      // 处理带背词库，检查带背词库是否可用
      if (item.thesaurusCategory === "Racked") {
        if (!(await this.$refs.daiBeiAlert.checkAvailable(item.thesaurusId, item.jumpPaidPage))) {
          return
        }
      }
      //跳转到单词学习计划页面
      uni.navigateTo({
        url: handleUrlParams("/vocabulary/pages/currentPlanInfo/index", {
          thesaurusId: item.thesaurusId,
        }),
      })
    },
  },
  created() {
    //获取词库列表
    request({
      url: "thesaurus/getAllThesaurus",
      data: {
        current: 1,
        size: -1,
      },
      showLoading: true,
      errorHandle: true,
    }).then((data) => {
      this.list = data.records
    })
  },
  data() {
    return {
      list: [],
    }
  },
}
</script>

<template>
  <view class="component">
    <view class="title">
      <view class="point"></view>
      <view class="text">背单词</view>
    </view>
    <view class="thesaurus-list">
      <view class="thesaurus-item" v-for="item in list" :key="item.thesaurusId" @click="itemClick(item)">
        <image :src="getShowImage(item.thesaurusImg)" class="image" mode="aspectFill"></image>
      </view>
    </view>

    <checkIsVip ref="checkIsVip"></checkIsVip>
    <daiBeiAlert ref="daiBeiAlert"></daiBeiAlert>
  </view>
</template>

<style scoped lang="scss">
.component {
  padding: 30rpx;
  border-radius: 30rpx;
  background: white;
  > .title {
    display: flex;
    align-items: center;
    .point {
      width: 8rpx;
      height: 30rpx;
      background: var(--theme-color);
    }
    .text {
      font-size: 34rpx;
      margin-left: 20rpx;
      font-weight: bold;
    }
  }
  .thesaurus-list {
    margin-top: 30rpx;
    display: flex;
    flex-wrap: nowrap;
    overflow: auto;
    .thesaurus-item {
      &:not(:last-child) {
        margin-right: 20rpx;
      }
      min-width: 150rpx;
      height: 180rpx;
      border-radius: 20rpx;
      overflow: hidden;
      .image {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
